<template>
    <div id="app">
        <van-nav-bar
            :title="title"
            :left-text="$route.meta.showBack && '返回'"
            :left-arrow="$route.meta.showBack"
            class="navbar"
            @click-left="navigateBack"
        />
        <router-view class="router" />
    </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
    computed: {
        ...mapState({
            title: state => state.app.title
        })
    },
    methods: {
        navigateBack() {
            this.$router.go(-1);
        }
    }
};
</script>
<style lang="less">
@import "./styles/app.less";
body,
html {
    background-color: #f8f8f8;
    -webkit-font-smoothing: antialiased;
    height: 100%;
}
#app {
    position: relative;
    height: 100%;
}
.navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    z-index:2;
}
.router {
    position: absolute;
    top: 46px;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>
